<template>
    <div style="position: relative; top: 28px; height: 660px; overflow: scroll">
        <el-card class="box-card" v-for="device in devData" :key="device.id">
            <div slot="header" class="clearfix">
                <strong style="color: #ff0066">{{ device.name }}</strong>
                <el-button style="float: right; padding: 3px 0" type="text"
                           @click="addSheet()">工单上报
                </el-button>
            </div>
            <div @click="jumpTo(device.id, device.name)">
                <img
                    src="https://ts1.cn.mm.bing.net/th/id/R-C.1c6c41230d9af3c3cb98cfa69633b0f1?rik=woU7i1%2byI8ifxA&riu=http%3a%2f%2fwww.smt66.com%2fUploadFiles%2fOthers%2f201809301417068688816.jpg&ehk=c1wIOdPYImXv%2fFcon6FMQhIJjpF%2fTJNv46lYdqlFdfI%3d&risl=&pid=ImgRaw&r=0"
                    class="image">

                <div class="text item" style="line-height:30px; text-align: left" v-for="(item, key, index) in device" :key="index">
                    <strong>{{key}}</strong>：{{item}}
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "Cards",

    data() {
        return {
            rawData: [],
            devData: [],
            value1: null,
            value2: null,
        }
    },

    methods: {
        getDevData(){
            switch (this.value1){
                case '0':
                    this.devData = this.rawData
                    break
                case '1':
                    this.devData = this.rawData.filter( elem => {
                        return elem.line === '2020210432-a'
                    })
                    break
                case '2':
                    this.devData = this.rawData.filter( elem => {
                        return elem.line === '2020210432-b'
                    })
                    break
            }
            switch (this.value2){
                case 'a':
                    this.devData = this.devData.filter(elem => {
                        return elem.status === 0
                    })
                    break
                case 'b':
                    this.devData = this.devData.filter( elem => {
                        return elem.status === 1
                    })
                    break
                case 'c':
                    this.devData = this.devData.filter( elem => {
                        return elem.status === 2
                    })
                    break
            }
        },
        jumpTo(id, name) {
            // console.log('设备详情跳转')
            this.$router.push({
                path: '/Device',
                query: {
                    id,
                    name
                }
            })
        },
        addSheet() {
            this.$router.push('/addForm')
        },
    },

    mounted() {
        this.value1 = this.$route.query.value1
        this.value2 = this.$route.query.value2
        this.devData = this.rawData = Object.values(this.$store.state.devices);
        this.getDevData();
        // console.log(this.$route)
        // console.log(this.value)

    },

}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.image {
    width: 100%;
    /*background: #f2f2f2;*/
    display: flex;
    justify-content: center;
    align-items: center;

    .image {
        max-width: 100%;
        max-height: 700px;
    }
}


</style>
